<template>
	<div>
		<div class="upload-box" :style="imgStyle">
			 <!-- 用户改变图片按钮的点击 触发上传图片事件  -->
			<input type="file" :ref="imgType$1"   @change="upload(formVal$1,imgType$1)" class="upload-input" />
			<!-- img 的 src 用于渲染一个 图片路径  传入图片路径 渲染出图片  -->
			<img :src="formVal$1[imgType$1]?formVal$1[imgType$1]:'static/img/upload.jpg'" />
		</div>
	</div>
</template>
<script>
/* 
  该组件因为要上传多个属性的图片  主图（mainImg） 详细图(detailImg)  规格图 (plusImg)  
	该组件基于压缩插件lrz,所以下方打入该组件
	npm install lrz --save 即可
*/
import lrz from 'lrz';
export default {
    name: 'uploadImg', //组件名字
    props: {
        formVal: {
            type: Object, //props接受对象类型数据（表单对象也可以是纯对象类型）
            required: true,
            default: {}
        },
        imgType: {                //表单对象中的图片属性 example:mainImg
            type: String,
            required: true,
            default: ''
        },
        imgStyle: {
            type: Object,        //  用于显示的图片的样式 
            required: true //必须传递
        }
    },
    created: function() {
        //生命周期函数 
    },
    data: function() {
      /*
         因为该组件需要改变父组件传递过来的值,
         所以将起拷贝一份
      */
        let formVal$1 = this.formVal;
        let imgType$1 = this.imgType;
        return {
            formVal$1,
            imgType$1,
            uploadUrl: '/api/common/upload/index/',//你的服务器url地址
        };
    },
    methods: {
        upload: function(formVal, imgType) {
            var self = this;
            //图片上传加载我们在这里加入提示，下方需要主动关闭，防止页面卡死
            var loadingInstance = this.$loading({
                text: '上传中'
            });
            var that = this.$refs[imgType].files[0]; //文件压缩file
            //图片上传路径
            var testUrl = this.uploadUrl; //图片上传路径
            try {
                //lrz用法和上一个一样也是一个压缩插件来的
                lrz(that)
                    .then(function(message) {
                        var formData = message.formData; //压缩之后我们拿到相应的formData上传
                        self.$axios
                            .post(testUrl, formData)
                            .then(function(res) {
                                console.log(res);
                                if (res && res.data.iRet == 0) {
                                    formVal[imgType] = res.data.objData.sUrl;
                                    //上传成功之后清掉数据防止下次传相同图片的时候不触发change事件 
                                    self.$refs[imgType].value = '';
                                    /*
	                                    这里因为使用elementUI中的表单验证，
	                                    当上传图片完成之后还会提示没有上传图片
	                                    所以需要通知父组件清除该验证标记 
                                     */
                                    self.$emit('clearValidate', imgType);
                                    self.$nextTick(() => {
                                        // 以服务的方式调用的 Loading 需要异步关闭
                                        loadingInstance.close();
                                    });
                                } else {
                                    throw res.data.sMsg;
                                }
                            })
                            .catch(function(err) {
                                self.$nextTick(() => {
                                    // 以服务的方式调用的 Loading 需要异步关闭
                                    loadingInstance.close();
                                });
                                //接口报错弹出提示
                                alert(err);
                            });
                    })
                    .catch(function(err) {
                        self.$nextTick(() => {
                            loadingInstance.close();
                        });
                    });
            } catch (e) {
                //关闭加载动画实例
                self.$nextTick(() => {
                    loadingInstance.close();
                });
            }
        }
    },
    mounted: function() {},
    watch: {
       /*
        这里需要注意当父组件上传一个图片然后通过重置按钮重置的时候.
         我们需要监听一下,防止上传同一张图片上传失败
        */
        formVal: {
            handle: function(newVal, oldVal) {
                var imgType = this.imgType;
                if (newVal[imgType] == '') {
                   //这里使用了原生js写法当然也可以通过ref引用找到，后者更好
                    document.getElementsByClassName('upload-input')[0].value = '';
                }
            }
        }
    }
};
</script>
<style scoped>
/*
 这里是默认的设置图片的尺寸。可以通过父组件传值将其覆盖
*/
.upload-box {
    position: relative;
    height: 100px;
    width: 100px;
    overflow: hidden;
}

.upload-box img {
    width: 100%;
    height: 100%;
}

.upload-box .upload-input {
    position: absolute;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
</style>

